import React, { Component } from 'react'
import './index.less'
import { Tabs, Row, Col, Card, Button, Table, Input } from 'antd';
import CollapseCard from './collapseCard'
import PersonnelItem from './personnelItem'
import QueueAnim from 'rc-queue-anim';
import Http from '../../../axios';
import moment from 'moment'
const TabPane = Tabs.TabPane;
const Search = Input.Search;

export default class Personal extends Component {

  state = {
      viewFlag: false,
      record: '',
      userListData: {'测试部': [], '系统研发部': [], '应用研发部': [], '项目部': []},
      weeklyDataArray: [],
      currentPage: 0,
      pageSize: 10,
      searchKey: '',
      weeklyData: []
  }

  componentWillMount() {
    this.getUserList();
    this.getWeeklyDataArray();
  }

  getWeeklyDataArray = () => {
    let url = '';
    let params = {};
    if (!this.state.searchKey) {
      url = '/individual_report/list';
      params = {
        page: this.state.currentPage,
        size: this.state.pageSize
      }
    } else {
      url = '/individual_report/search';
      params = {
        page: this.state.currentPage,
        size: this.state.pageSize,
        value: this.state.searchKey
      }
    }
    Http.request({
      url: url,
      params: params
    }).then((resData) => {
      this.setState({
        weeklyDataArray: resData.data
      })
    })
  }

  getUserList = () => {
    Http.request({
      url: '/individual_report/list_user' 
    }).then((resData) => {
      this.setState({
        userListData: Object.assign(this.state.userListData, resData.data)
      })
    })
  }

  rowClick = (record, index) => {
    Http.request({
      url: `/individual_report_detail/list/${record.reportCode}`
    }).then((resData) => {
      let weeklyData = resData.data.data;
      for (let i = 0; i < weeklyData.length; i++) {
        weeklyData[i].index = i + 1;
      }
      this.setState({
        viewFlag: true,
        record: resData.data,
        weeklyData
      })
    })
  }

  viewBack = () => {
    this.setState({
      viewFlag: false
    })
  }

  allSearch = (value) => {
    this.setState({
      searchKey: value,
      currentPage: 0
    })
    setTimeout(() => {
      this.getWeeklyDataArray();
    }, 0);
  }

  pageChange = (page, pageSize) => {
    this.setState({
      currentPage: (page - 1)*10,
      pageSize
    })
    setTimeout(() => {
      this.getWeeklyDataArray();
    })
    
  }
  sizeChange = (current, size) => {
    this.setState({
      currentPage: (current - 1)*10,
      pageSize: size
    })
    setTimeout(() => {
      this.getWeeklyDataArray();
    })
  }

  render() {
    const columns = [{
      title: '责任人',
      dataIndex: 'username',
      key: 'username',
    }, 
    {
      title: '责任人部门',
      dataIndex: 'departmentName',
      key: 'departmentName',
    }, 
    {
      title: '周报期数',
      dataIndex: 'date',
      key: 'date',
    }, 
    {
      title: '填写时间',
      dataIndex: 'createDay',
      key: 'createDay',
    }];

    const columns2 = [
      {
        title: '序号',
        dataIndex: 'index',
        key: 'index',
      },
      {
        title: '项目名称',
        dataIndex: 'projectName',
        key: 'projectName',
      },
      {
        title: '项目类别',
        dataIndex: 'projectType',
        key: 'projectType',
      },
      {
        title: '项目编号',
        dataIndex: 'projectNo',
        key: 'projectNo',
      },
      {
        title: '任务简述',
        dataIndex: 'taskDesc',
        key: 'taskDesc',
      },
      {
        title: '当前进展(%)',
        dataIndex: 'progressType',
        key: 'progressType',
      },
      {
        title: '本周投入时间(小时)',
        dataIndex: 'workHour',
        key: 'workHour',
      },
      {
        title: '预期完成时间',
        dataIndex: 'expectDate',
        key: 'expectDate',
        render: (text, record) => moment(record.expectDate).format('YYYY-MM-DD')
      },
      {
        title: '是否延期',
        dataIndex: 'delay',
        key: 'delay',
        render: (text, record) => {
          switch (record.delay) {
            case true:
              return '是'
            default:
              return '否'
          }
        }
      },
      {
        title: '问题和风险',
        dataIndex: 'risk',
        key: 'risk',
      },
    ]
    
    return (
      <section className="base-section">
        <Tabs defaultActiveKey="1" onChange={this.tabChange}>
          <TabPane tab="员工列表" key="1">
            <CollapseCard className="collapse-card" titleName='测试部'>
              <Row gutter={20} key="test">
                <QueueAnim duration={300}>
                  {
                    this.state.userListData['测试部'].map((item, index) => 
                      <Col span={3} key={index} className="col-anmi">
                        <PersonnelItem data={item}></PersonnelItem>
                      </Col>
                    )
                  }  
                </QueueAnim>
              </Row>
            </CollapseCard>
            <CollapseCard className="collapse-card" titleName='系统研发部'>
              <Row gutter={20} key="sy">
                <QueueAnim duration={300}>
                  {
                    this.state.userListData['系统研发部'].map((item, index) => 
                      <Col span={3} key={index} className="col-anmi">
                        <PersonnelItem data={item}></PersonnelItem>
                      </Col>
                    )
                  }  
                </QueueAnim>
              </Row>
            </CollapseCard>
            <CollapseCard className="collapse-card" titleName='应用研发部'>
              <Row gutter={20} key="rd">
                <QueueAnim duration={300}>
                  {
                    this.state.userListData['应用研发部'].map((item, index) => 
                      <Col span={3} key={index} className="col-anmi">
                        <PersonnelItem data={item}></PersonnelItem>
                      </Col>
                    )
                  }  
                </QueueAnim>
              </Row>
            </CollapseCard>
            <CollapseCard className="collapse-card" titleName='项目部'>
              <Row gutter={20} key="it">
                <QueueAnim duration={300}>
                  {
                    this.state.userListData['项目部'].map((item, index) => 
                      <Col span={3} key={index} className="col-anmi">
                        <PersonnelItem data={item}></PersonnelItem>
                      </Col>
                    )
                  }  
                </QueueAnim>
              </Row>
            </CollapseCard>
          </TabPane>
          <TabPane tab="全部周报" key="2">
            <div className={this.state.viewFlag ? 'react-show' : ''}>
              <Row>
                <Col offset={19} span={5}>
                  <Search placeholder="请输入搜索内容" className="search" onSearch={this.allSearch}/>
                </Col>
              </Row>
              <Row>
                <Table columns={columns} dataSource={this.state.weeklyDataArray.list} onRowClick={this.rowClick} 
                pagination={{defaultPageSize: 10, total: this.state.weeklyDataArray.count, showSizeChanger: true, onChange: this.pageChange, onShowSizeChange: this.sizeChange}} />
              </Row>
            </div>
            <Card title={this.state.record.number} bordered={false} className={!this.state.viewFlag ? 'react-show' : ''}>
              <Row className="form-row">
                <Col className="form-col" span={8}>
                  <span className="lable">责任人：</span>
                  <span>{this.state.record.username}</span>
                </Col> 
                <Col className="form-col" span={8}>
                  <span className="lable">责任人部门：</span>
                  <span>{this.state.record.departmentName}</span>
                </Col>
                <Col className="form-col" span={8}>
                  <span className="lable">有效工作时长：</span>
                   <span>{this.state.record.validDay}</span>
                </Col>
              </Row>
              <Row className="form-row">
                <Col className="form-col" span={8}>
                  <span className="lable">总工作时长：</span>
                  <span>{this.state.record.totalHour}</span>
                </Col> 
                <Col className="form-col" span={8}>
                  <span className="lable">有效输出时长：</span>
                  <span>{this.state.record.effectRate}</span>
                </Col>
                <Col className="form-col" span={8}>
                  <span className="lable">剩余时间占比：</span>
                  <span>{this.state.record.surplusRate}</span>
                </Col>
              </Row>
              <Row className="table">
                <Table columns={columns2} dataSource={this.state.weeklyData} pagination={{defaultPageSize: 10, showSizeChanger: true}} />
              </Row>
              <Row className="table button-group">
                <Button className="create-button" type="primary" onClick={this.viewBack}>返回</Button>
              </Row>
            </Card>
          </TabPane>
        </Tabs>
      </section>
    )
  }
}
